<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #img {
            width: 500px;
            background-color: #bfa;
            padding: 10px;
            text-align: center;
            margin: 10px auto;
        }
    </style>

    <script>
        window.onload = function () {

            /*点击按钮切换图片*/


            //获取两个按钮
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");


            /*要切换图片就是要修改img标签的src属性*/

            //获取img标签
            var img = document.getElementsByTagName("img")[0];

            //创建一个数组，用来保存图片路径
            var imgArr = ["./images/京东轮播图1.jpg", "./images/京东轮播图2.jpg", "./images/京东轮播图3.jpg", "./images/京东轮播图4.jpg", "./images/京东轮播图5.jpg", "./images/京东轮播图6.jpg", "./images/京东轮播图7.jpg", "./images/京东轮播图8.jpg"]

            //创建一个变量，来保存当前正在显示的图片的索引
            var index = 0;

            //设置提示文字
            var info = document.getElementById("info");
            info.innerHTML = "一共" + imgArr.length + "张图，这是第" + (index + 1) + "张";

            //分别为两个按钮绑定单击响应函数
            btn1.onclick = function () {
                index--;

                //判断index是否小于零
                if (index < 0) {
                    index = imgArr.length - 1;
                }

                img.src = imgArr[index];

                info.innerHTML = "一共" + imgArr.length + "张图，这是第" + (index + 1) + "张";

            }

            btn2.onclick = function () {
                index++;

                //判断index是否大于7
                if (index > imgArr.length - 1) {
                    index = 0;
                }

                img.src = imgArr[index];

                info.innerHTML = "一共" + imgArr.length + "张图，这是第" + (index + 1) + "张";

            }



        };                                                                                                                                                                                                                                                                                                                       
    </script>
</head>

<body>
    <div id="img">
        <p id="info"></p>
        <img src="./images/京东轮播图1.jpg" alt="" style="width: 500px;">
        <button id="btn1">上一张</button><button id="btn2">下一张</button>
    </div>
</body>

</html>